<template name="skeleton">
  <view class="sk-container">
    <view class="viewport viewport">
      <view class="search-panel search-panel">
        <text class="icon-search sk-pseudo sk-pseudo-circle"
          ><text class="input sk-transparent sk-text-29-6875-154 sk-text">女靴</text></text
        >
      </view>
      <view class="categories categories">
        <scroll-view :scroll-y="true" class="left left">
          <view
            class="primary-item sk-transparent sk-text-30-0000-773 sk-text sk-pseudo sk-pseudo-circle"
            style="background-position-x: 50%"
            >居家</view
          >
          <view
            class="primary-item sk-transparent sk-text-30-0000-533 sk-text sk-pseudo sk-pseudo-circle"
            style="background-position-x: 50%"
            >美食</view
          >
          <view
            class="primary-item sk-transparent sk-text-30-0000-664 sk-text sk-pseudo sk-pseudo-circle"
            style="background-position-x: 50%"
            >服饰</view
          >
          <view
            class="primary-item sk-transparent sk-text-30-0000-230 sk-text sk-pseudo sk-pseudo-circle"
            style="background-position-x: 50%"
            >母婴</view
          >
          <view
            class="primary-item sk-transparent sk-text-30-0000-196 sk-text sk-pseudo sk-pseudo-circle"
            style="background-position-x: 50%"
            >个护</view
          >
          <view
            class="primary-item active sk-transparent sk-text-30-0000-952 sk-text sk-pseudo sk-pseudo-circle"
            style="background-position-x: 50%"
            >严选</view
          >
          <view
            class="primary-item sk-transparent sk-text-30-0000-645 sk-text sk-pseudo sk-pseudo-circle"
            style="background-position-x: 50%"
            >数码</view
          >
          <view
            class="primary-item sk-transparent sk-text-30-0000-622 sk-text sk-pseudo sk-pseudo-circle"
            style="background-position-x: 50%"
            >运动</view
          >
          <view
            class="primary-item sk-transparent sk-text-30-0000-69 sk-text sk-pseudo sk-pseudo-circle"
            style="background-position-x: 50%"
            >杂项</view
          >
        </scroll-view>
        <scroll-view :scroll-y="true" class="right right">
          <view class="banner banner">
            <view is="components/XtxBanner">
              <view class="carousel XtxBanner--carousel data-v-8e193a37 XtxBanner--data-v-8e193a37">
                <swiper
                  class="swiper XtxBanner--swiper data-v-8e193a37 XtxBanner--data-v-8e193a37"
                  :current="0"
                  :autoplay="false"
                >
                  <swiper-item
                    class="data-v-8e193a37 XtxBanner--data-v-8e193a37"
                    data-index="0"
                    style="
                      position: absolute;
                      width: 100%;
                      height: 100%;
                      transform: translate(0%, 0px) translateZ(0px);
                    "
                  >
                    <navigator
                      class="navigator XtxBanner--navigator data-v-8e193a37 XtxBanner--data-v-8e193a37"
                      hover-class="none"
                    >
                      <image
                        class="image XtxBanner--image data-v-8e193a37 XtxBanner--data-v-8e193a37 sk-image"
                        mode="widthFix"
                        style="height: 102.823px"
                      ></image>
                    </navigator>
                  </swiper-item>
                  <swiper-item
                    class="data-v-8e193a37 XtxBanner--data-v-8e193a37"
                    data-index="1"
                    style="
                      position: absolute;
                      width: 100%;
                      height: 100%;
                      transform: translate(100%, 0px) translateZ(0px);
                    "
                  >
                    <navigator
                      class="navigator XtxBanner--navigator data-v-8e193a37 XtxBanner--data-v-8e193a37"
                      hover-class="none"
                    >
                      <image
                        class="image XtxBanner--image data-v-8e193a37 XtxBanner--data-v-8e193a37 sk-image"
                        mode="widthFix"
                        style="height: 102.823px"
                      ></image>
                    </navigator>
                  </swiper-item>
                </swiper>
                <view
                  class="indicator XtxBanner--indicator data-v-8e193a37 XtxBanner--data-v-8e193a37"
                >
                  <text
                    class="dot XtxBanner--dot data-v-8e193a37 XtxBanner--data-v-8e193a37 active XtxBanner--active"
                  ></text>
                  <text
                    class="dot XtxBanner--dot data-v-8e193a37 XtxBanner--data-v-8e193a37"
                  ></text>
                  <text
                    class="dot XtxBanner--dot data-v-8e193a37 XtxBanner--data-v-8e193a37"
                  ></text>
                  <text
                    class="dot XtxBanner--dot data-v-8e193a37 XtxBanner--data-v-8e193a37"
                  ></text>
                  <text
                    class="dot XtxBanner--dot data-v-8e193a37 XtxBanner--data-v-8e193a37"
                  ></text>
                </view>
              </view>
            </view>
          </view>
          <view class="sub-categories sub-categories">
            <view class="sub-item sub-item">
              <view class="top top">
                <view class="title sk-transparent sk-text-23-3333-747 sk-text">滋补保健</view>
                <view
                  class="more sk-transparent sk-text-23-3333-7 sk-text sk-pseudo sk-pseudo-circle"
                  >全部</view
                >
              </view>
              <view class="goods-container goods-container">
                <view class="good good">
                  <image class="image sk-image" mode="aspectFill"></image>
                  <view class="title title">
                    <text class="text sk-transparent sk-text-14-2857-548 sk-text"
                      >新西兰珍宝麦卢卡蜂蜜MGO250+活性因子250g</text
                    >
                  </view>
                  <view class="price price">
                    <text class="symbol sk-transparent sk-opacity">￥</text>
                    <text class="number sk-transparent sk-text-15-0000-935 sk-text">169.00</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="sub-item sub-item">
              <view class="top top">
                <view class="title sk-transparent sk-text-23-3333-295 sk-text">床品家纺</view>
                <view
                  class="more sk-transparent sk-text-23-3333-200 sk-text sk-pseudo sk-pseudo-circle"
                  >全部</view
                >
              </view>
              <view class="goods-container goods-container">
                <view class="good good">
                  <image class="image sk-image" mode="aspectFill"></image>
                  <view class="title title">
                    <text class="text sk-transparent sk-text-14-2857-746 sk-text"
                      >奢享丝滑睡眠，儿童真丝蚕丝被</text
                    >
                  </view>
                  <view class="price price">
                    <text class="symbol sk-transparent sk-opacity">￥</text>
                    <text class="number sk-transparent sk-text-15-0000-336 sk-text">1480.00</text>
                  </view>
                </view>
                <view class="good good">
                  <image class="image sk-image" mode="aspectFill"></image>
                  <view class="title title">
                    <text class="text sk-transparent sk-text-14-2857-797 sk-text"
                      >轻盈柔软如睡云端天然乳胶透气夏凉被</text
                    >
                  </view>
                  <view class="price price">
                    <text class="symbol sk-transparent sk-opacity">￥</text>
                    <text class="number sk-transparent sk-text-15-0000-689 sk-text">339.00</text>
                  </view>
                </view>
                <view class="good good">
                  <image class="image sk-image" mode="aspectFill"></image>
                  <view class="title title">
                    <text class="text sk-transparent sk-text-14-2857-403 sk-text"
                      >泰国玻尿酸天然乳胶枕礼盒</text
                    >
                  </view>
                  <view class="price price">
                    <text class="symbol sk-transparent sk-opacity">￥</text>
                    <text class="number sk-transparent sk-text-15-0000-993 sk-text">205.00</text>
                  </view>
                </view>
                <view class="good good">
                  <image class="image sk-image" mode="aspectFill"></image>
                  <view class="title title">
                    <text class="text sk-transparent sk-text-14-2857-396 sk-text"
                      >偏爱低枕选它泰国93%含量天然乳胶面包枕</text
                    >
                  </view>
                </view>
                <view class="good good">
                  <image class="image sk-image" mode="aspectFill"></image>
                  <view class="title title">
                    <text class="text sk-transparent sk-text-14-2857-359 sk-text"
                      >睡着放松肩颈泰国93%天然乳胶枕蝶形护肩</text
                    >
                  </view>
                </view>
                <view class="good good">
                  <image class="image sk-image" mode="aspectFill"></image>
                  <view class="title title">
                    <text class="text sk-transparent sk-text-14-2857-92 sk-text"
                      >泰国进口乳胶，儿童抗菌防螨护颈乳胶枕</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '../styles/category';
.sk-transparent {
  color: transparent !important;
}
.sk-text-29-6875-154 {
  background-image: linear-gradient(
    transparent 29.6875%,
    #eeeeee 0%,
    #eeeeee 70.3125%,
    transparent 0%
  ) !important;
  background-size: 100% 64rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-30-0000-773 {
  background-image: linear-gradient(
    transparent 30%,
    #eeeeee 0%,
    #eeeeee 70%,
    transparent 0%
  ) !important;
  background-size: 100% 80rpx;
  position: relative !important;
}
.sk-text-30-0000-533 {
  background-image: linear-gradient(
    transparent 30%,
    #eeeeee 0%,
    #eeeeee 70%,
    transparent 0%
  ) !important;
  background-size: 100% 80rpx;
  position: relative !important;
}
.sk-text-30-0000-664 {
  background-image: linear-gradient(
    transparent 30%,
    #eeeeee 0%,
    #eeeeee 70%,
    transparent 0%
  ) !important;
  background-size: 100% 80rpx;
  position: relative !important;
}
.sk-text-30-0000-230 {
  background-image: linear-gradient(
    transparent 30%,
    #eeeeee 0%,
    #eeeeee 70%,
    transparent 0%
  ) !important;
  background-size: 100% 80rpx;
  position: relative !important;
}
.sk-text-30-0000-196 {
  background-image: linear-gradient(
    transparent 30%,
    #eeeeee 0%,
    #eeeeee 70%,
    transparent 0%
  ) !important;
  background-size: 100% 80rpx;
  position: relative !important;
}
.sk-text-30-0000-952 {
  background-image: linear-gradient(
    transparent 30%,
    #eeeeee 0%,
    #eeeeee 70%,
    transparent 0%
  ) !important;
  background-size: 100% 80rpx;
  position: relative !important;
}
.sk-text-30-0000-645 {
  background-image: linear-gradient(
    transparent 30%,
    #eeeeee 0%,
    #eeeeee 70%,
    transparent 0%
  ) !important;
  background-size: 100% 80rpx;
  position: relative !important;
}
.sk-text-30-0000-622 {
  background-image: linear-gradient(
    transparent 30%,
    #eeeeee 0%,
    #eeeeee 70%,
    transparent 0%
  ) !important;
  background-size: 100% 80rpx;
  position: relative !important;
}
.sk-text-30-0000-69 {
  background-image: linear-gradient(
    transparent 30%,
    #eeeeee 0%,
    #eeeeee 70%,
    transparent 0%
  ) !important;
  background-size: 100% 80rpx;
  position: relative !important;
}
.sk-text-23-3333-747 {
  background-image: linear-gradient(
    transparent 23.3333%,
    #eeeeee 0%,
    #eeeeee 76.6667%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}
.sk-text-23-3333-7 {
  background-image: linear-gradient(
    transparent 23.3333%,
    #eeeeee 0%,
    #eeeeee 76.6667%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}
.sk-text-14-2857-548 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-opacity {
  opacity: 0 !important;
}
.sk-text-15-0000-935 {
  background-image: linear-gradient(
    transparent 15%,
    #eeeeee 0%,
    #eeeeee 85%,
    transparent 0%
  ) !important;
  background-size: 100% 40rpx;
  position: relative !important;
}
.sk-text-23-3333-295 {
  background-image: linear-gradient(
    transparent 23.3333%,
    #eeeeee 0%,
    #eeeeee 76.6667%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}
.sk-text-23-3333-200 {
  background-image: linear-gradient(
    transparent 23.3333%,
    #eeeeee 0%,
    #eeeeee 76.6667%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}
.sk-text-14-2857-746 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-15-0000-336 {
  background-image: linear-gradient(
    transparent 15%,
    #eeeeee 0%,
    #eeeeee 85%,
    transparent 0%
  ) !important;
  background-size: 100% 40rpx;
  position: relative !important;
}
.sk-text-14-2857-797 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-15-0000-689 {
  background-image: linear-gradient(
    transparent 15%,
    #eeeeee 0%,
    #eeeeee 85%,
    transparent 0%
  ) !important;
  background-size: 100% 40rpx;
  position: relative !important;
}
.sk-text-14-2857-403 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-15-0000-993 {
  background-image: linear-gradient(
    transparent 15%,
    #eeeeee 0%,
    #eeeeee 85%,
    transparent 0%
  ) !important;
  background-size: 100% 40rpx;
  position: relative !important;
}
.sk-text-14-2857-396 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-14-2857-359 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-14-2857-92 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
